<template>
    <div class="login" >
        <div class="login_shade"></div>
        <el-form ref="loginRef"
                 :model="data.loginForm"
                 :rules="data.loginRules"
                 class="login-form"
                 v-loading="data.loading"
        >
            <h3 class="title">后台管理系统</h3>
            <el-form-item prop="username">
                <el-input
                    v-model="data.loginForm.username"
                    type="text"
                    size="large"
                    auto-complete="off"
                    placeholder="账号"
                >
                    <template #prefix>
                        <el-icon><User /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    v-model="data.loginForm.password"
                    type="password"
                    size="large"
                    auto-complete="off"
                    placeholder="密码"
                    @keyup.enter="handleLogin"
                >
                    <template #prefix>
                        <el-icon><Lock /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
<!--            <el-form-item prop="captcha" v-if="data.isCaptcha">-->
<!--                <el-input-->
<!--                    v-model="data.loginForm.captcha"-->
<!--                    size="large"-->
<!--                    auto-complete="off"-->
<!--                    placeholder="验证码"-->
<!--                    @keyup.enter="handleLogin"-->
<!--                >-->
<!--                    <template #prefix>-->
<!--                        <el-icon><Message /></el-icon>-->
<!--                    </template>-->
<!--                </el-input>-->

<!--            </el-form-item>-->

<!--            <el-form-item>-->
<!--                <img :src="data.codeUrl" @click="refreshCode" style="width: 100%;height: 80px;cursor: pointer">-->
<!--            </el-form-item>-->


<!--            <el-form-item>-->
<!--                <el-alert-->
<!--                    v-if="captcha.success"-->
<!--                    title="验证成功" type="success" show-icon :closable="false" />-->
<!--                <el-collapse-transition>-->
<!--                    <Verify-->
<!--                        v-if="!captcha.success"-->
<!--                        @success="ajVerify"-->
<!--                        mode="fixed"-->
<!--                        captchaType="blockPuzzle"-->
<!--                        :imgSize="{ width: '400px', height: '230px' }"-->
<!--                        ref="verify"-->
<!--                    ></Verify>-->
<!--                </el-collapse-transition>-->


<!--            </el-form-item>-->


            <el-checkbox v-model="data.loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button
                    size="large"
                    type="primary"
                    style="width:100%;"
                    @click.prevent="handleLogin"
                >
                    <span>登录</span>
                </el-button>
            </el-form-item>
        </el-form>
        <!--  底部  -->
        <div class="el-login-footer">
            <span>Copyright © 2018-2022 mihai All Rights Reserved.</span>
        </div>
    </div>
</template>

<script setup lang="ts" name="Login">
import {useRoute, useRouter} from "vue-router";
import {reactive, ref} from "vue";
import Cookies from "js-cookie";
import {decrypt, encrypt} from "@/utils/jsencrypt"
import {getToken, setToken} from "@/utils/auth";
import {FormInstance} from "element-plus";
import {simplePost} from "@/utils/request";
import {msgSuccess} from "@/utils/alert";
import global from "@/dict/global";
import Verify from "@/components/verifition/Verify.vue"
import {login} from "@/api/open";


const getCode = () => {
    return import.meta.env.VITE_APP_BASE_API + '/open.captcha/capaa' + '?time=' + Date.now()
}

const refreshCode = () => {
    data.codeUrl = getCode()
}

const getForm = () => {
    // 获取记住的用户名和密码
    const username = Cookies.get("username");
    const password = Cookies.get("password");
    const rememberMe = Cookies.get("rememberMe");
    return  {
        username: username === undefined ? '' : username,
        password: password === undefined ? '' : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        captcha:'',
    };
}

const router = useRouter()
const route = useRoute()
const loginRef = ref<FormInstance>()
const data : any = reactive({
    isCaptcha: true,    // 是否开启验证码
    codeUrl: getCode(),        // 验证码路径
    register: false,    // 是否开启注册
    loginForm: getForm(),
    loginRules:{
        username: [{required: true, trigger: "blur", message: "请输入您的账号"}],
        password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
        captcha: [{required: true, trigger: "change", message: "请输入验证码"}]
    },
    loading: false
})

const captcha = reactive({
    success:false,
    type: 'blockPuzzle',
})

const handleLogin = () => {
    loginRef.value?.validate(valid => {
        if (valid){
            // 勾选了需要记住密码设置在cookie中设置记住用户明和名命
            if (data.loginForm.rememberMe) {
                Cookies.set("username", data.loginForm.username, {expires: 30});
                Cookies.set("password", encrypt(data.loginForm.password), {expires: 30});
                Cookies.set("rememberMe", "1", {expires: 30});
            } else {
                // 否则移除
                Cookies.remove("username");
                Cookies.remove("password");
                Cookies.remove("rememberMe");
            }

            data.loading = true


            login(data.loginForm).then(({ token }) => {
                msgSuccess("正在登录，请稍候……")
                // 保存token
                setToken(global.adminToken, token)
                // 跳转
                const path = (route.query && route.query.redirect) ? route.query.redirect : '/'
                router.replace(path.toString());
            }).catch(res => {
                data.loading = false
            })
        }
    })
}

const ajVerify = (e:any) => {
    console.log(e)
    // 验证码验证成功，这里写登录功能，将登录参入和验证成功信息一起传回后台登录接口
    // 隐藏滑块，显示验证成功，
    captcha.success = true
    // 写入表单数据
    data.loginForm.captcha = e.captchaVerification

}

</script>

<style lang='scss' scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../../assets/image/login-background.jpg");
    background-size: cover;
}
.login_shade{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(59, 59, 58, 0.2);
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.login-form {
    z-index: 99;
    border-radius: 6px;
    background-color: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
        height: 40px;

        input {
            height: 40px;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 0px;
    }
}

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}


.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}

.login-code-img {
    height: 40px;
    padding-left: 12px;
}
</style>
